import {useState,useEffect} from 'react'
import { Search,Toast,Button,Sticky,Cell,Popup ,Collapse   } from 'react-vant';
import styles from './she.module.css'
import axios from 'axios';
import {useNavigate} from 'react-router-dom'
import moment from 'moment'
export default function She() {
  const navigate=useNavigate()
  const [value, setValue] = useState('');
  const [list,setlist]=useState([])
  const [shequ,setshequ]=useState([])
  const [indexs,setIndexs]=useState(1)
  const [huati,sethuati]=useState([])
  const [pinglun,setpinglun]=useState([])
  const [pinglunId,setpinglunId]=useState('')
  const [pinglunId2,setpinglunId2]=useState('')
  const [flag, setFlag] = useState(false);
  const [show, setShow] = useState(false);

  const [inputValue, setInputValue] = useState('');

    // 定义表情包数据
    const emojis = ['😀', '😂', '🥳', '😎', '🤔'];

    // 处理表情包点击事件
    const handleEmojiClick = (emoji) => {
        setInputValue(prevValue => prevValue + emoji);
    };

    // 处理输入框内容变化
    const handleInputChange = (e) => {
        setInputValue(e.target.value);
    };

    // 处理发送按钮点击事件
    const handleSendClick = () => {
        // 这里可以添加发送消息的逻辑
        console.log('发送的内容:', inputValue);
        setInputValue('');
    };
  useEffect(()=>{
    gettiezi()
    getshequ()
    gethuati()
    getpinglun()
  },[])
  //获取帖子
  let gettiezi = async () => {
    let {data}=await axios.get('http://localhost:3000/gettiezi')
    console.log(data)
    if(data.code===200){
      setlist(data.data)
    }
  }
  //获取社区
  let getshequ = async () => {
    let {data}=await axios.get('http://localhost:3000/getshequ')
    console.log(data)
    if(data.code===200){
      setshequ(data.data)
    }
  }
  //获取话题
  let gethuati = async () => {
    let {data}=await axios.get('http://localhost:3000/gethuati',{params:{page:3,pagesize:1}})
    console.log(data)
    if(data.code===200){
      const topThreeHuati = data.data.slice(0, 3);
      sethuati(topThreeHuati);
    }
  }

  //修改状态
  let changeStatus = async (id) => {
    let {data}=await axios.post('http://localhost:3000/updatetiezi',{_id:id})
    console.log(data)
    if(data.code===200){
      Toast.success('关注成功')
      gettiezi()
    }else{
      Toast.success('取消关注')
      gettiezi()
    }
  }

  //评论
  let getpinglun = async () => {
    let {data}=await axios.get('http://localhost:3000/getpinglun')
    console.log(data)
    if(data.code===200){
      setpinglun(data.data)
    }
  }

  //添加一级评论
  let addpinglun = async () => {
    let {data}=await axios.post('http://localhost:3000/addpinglun',{tieziId:pinglunId,content:inputValue,time:new Date()})
    console.log(data)
    if(data.code===200){
      Toast.success('评论成功')
      getpinglun()
      setInputValue('')
      setShow(false)
    }
  }
  //添加二级评论
  let addpinglun2 = async () => {
    let {data}=await axios.post('http://localhost:3000/addpinglun',{tieziId:pinglunId,content:inputValue,time:new Date(),pid:pinglunId2})
    console.log(data)
    if(data.code===200){
      Toast.success('评论成功')
      getpinglun()
      setInputValue('')
      setpinglunId2('')
      setShow(false)
    }
  }
  return (
    <>
      <Sticky>
        <div style={{display:"flex",alignItems:'center',justifyContent:'space-around',backgroundColor:'white'}}>
          <Search
            style={{width:'90%'}}
            value={value}
            onChange={setValue}
            placeholder="请输入搜索关键词"
            // showAction
            onSearch={(val) => {
              Toast(val);
              setValue(val);
            }}
            onCancel={() => {
              Toast('取消');
              setValue('');
            }}
            onClear={() => {
              Toast('清除');
              setValue('');
            }}
            onClickInput={() => {
              Toast('点击输入区域时触发	');
            }}
          />
          <svg t="1740123832384" onClick={()=>navigate('/xiaoxi')} className={styles.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5127" width="200" height="200"><path d="M512 212l48.8 12c101.6 24.8 176 117.6 176 220.8v254.4l18.4 18.4 24.8 25.6h-536l24.8-25.6 18.4-18.4V444.8c0-103.2 73.6-196.8 176-220.8l48.8-12M512 64c-36.8 0-64 30.4-64 68v30.4C320.8 192 223.2 307.2 223.2 444.8v228.8L136 763.2v44.8h752v-44.8l-87.2-89.6V444.8c0-137.6-97.6-252.8-224.8-283.2v-28.8c0-32-17.6-60.8-48-67.2-5.6-1.6-11.2-1.6-16-1.6z m88 808H424c0 49.6 38.4 88 88 88s88-38.4 88-88z" p-id="5128"></path></svg>
        </div>
        
      </Sticky>
      <div className={styles.top}>
        {
          shequ.map((item,index)=>{
            return <div key={item._id} onClick={()=>setIndexs(index)} className={indexs===index?styles.border_bottom:''}>{item.name}</div>
          })
        }
      </div>
      <div style={{height:'100%',backgroundColor:'rgb(243,243,243)',marginTop:'10px'}}>
        {
          indexs===0?
          <>
            {
            list.filter(i=>i.status===true).map((item)=>{
              return <div key={item._id} className={styles.big_box}>
                <div className={styles.box}>
                  <div style={{display:'flex',alignItems:'center'}}>
                    <div className={styles.touxiang} onClick={()=>navigate('/tiezhu?id='+item._id)}>
                      <img src='/public/1.png' style={{width:'100%',height:'100%',borderRadius:'50%'}} alt="" />
                    </div>
                    <div>
                    </div>
                    <div style={{marginLeft:'10px'}}>
                      <p style={{marginBottom:'5px',fontSize:'18px',fontWeight:'bold'}}>{item.username}</p>
                      <span>{item.time}</span>
                    </div>
                  </div>
                  <Button round type='info' onClick={()=>changeStatus(item._id)} className={styles.btn_text} color='rgb(251,229,172)'>
                    已关注
                  </Button>
                </div>
                <div style={{marginTop:'10px'}}>
                  <p style={{marginBottom:'10px',fontSize:'18px'}}>{item.content}</p>
                  <div style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
                    {
                      item.img.map(i=>{
                        return <img key={i} style={{width:'100px',height:'100px',marginRight:'10px',borderRadius:'10px'}} src={i} alt="" />
                      })
                    }
                  </div>
                </div>
                <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginTop:'10px'}}>
                  {/* 转发数 */}
                  <div style={{display:'flex',alignItems:'center'}}>
                    <svg t="1739790386357" className={styles.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4219" width="200" height="200"><path d="M865.922728 583.211878c-16.276708 0-29.580712 13.246699-29.667693 29.727045l0 215.125569c0 17.992793-14.58723 32.637328-32.520671 32.637328L181.762717 860.70182c-17.935488 0-32.520671-14.645558-32.520671-32.637328L149.242046 292.155966c0-17.992793 14.586207-32.637328 32.520671-32.637328l291.230897 0c16.304338-0.029676 29.580712-13.363356 29.580712-29.724998 0-16.392342-13.276375-29.727045-29.610388-29.727045l-295.336402 0c-48.358381 0-87.721901 39.450501-87.721901 87.925538l0 544.205493c0 48.475038 39.36352 87.925538 87.721901 87.925538l630.239961 0c48.358381 0 87.720877-39.450501 87.720877-87.925538L895.588375 612.762915C895.501394 596.458577 882.19739 583.211878 865.922728 583.211878z" fill="#231F20" p-id="4220"></path><path d="M930.818761 338.183256l0-0.318248L727.07645 133.511783l-6.435573-6.259564-0.814552 0.844228c-4.511757-2.532683-9.606799-3.873214-14.876826-3.873214-16.974603 0-30.774911 13.829983-30.774911 30.832216 0 5.298679 1.338485 10.393721 3.873214 14.907525l-0.903579 0.931209 141.845589 142.224212-145.573493 0.057305C436.396091 342.726735 378.197598 489.375723 361.049033 717.050096c0 17.004279 13.800307 30.832216 30.772864 30.832216 13.858636 0 25.620517-9.229199 29.464055-21.893636l1.397836-8.181333c18.022469-215.329207 60.470233-321.567833 251.839749-342.937536l144.466276 0L683.433464 510.804778l-5.502317 7.744381c-1.951445 4.104481-2.969635 9.112542-2.969635 13.654998 0 17.002232 13.799284 30.832216 30.772864 30.832216 4.832052 0 10.160407-1.164522 14.439874-3.37691L929.954067 350.740246c1.860371-1.305739 4.140297-4.52506 4.140297-6.970762C934.093341 341.323782 932.679132 339.488994 930.818761 338.183256z" fill="#231F20" p-id="4221"></path></svg>
                    {item.zhuanfa}
                  </div>
                  <div style={{display:'flex'}}>
                    {/* 收藏数 */}
                    <div style={{display:'flex',alignItems:'center'}}>
                      <svg t="1739790688231" className={styles.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5211" width="200" height="200"><path d="M454.613333 96.682667l-110.122666 223.146666-246.272 35.797334a64 64 0 0 0-35.456 109.141333l178.176 173.696-42.069334 245.290667a64 64 0 0 0 6.442667 40.576l3.114667 5.333333a64 64 0 0 0 83.328 21.546667L512 835.413333l220.245333 115.797334a64 64 0 0 0 92.885334-67.456l-42.069334-245.290667 178.176-173.653333a64 64 0 0 0-35.456-109.226667l-246.272-35.754667-110.08-223.146666a64 64 0 0 0-114.816 0zM512 173.226667l91.008 184.362666 3.328 6.144a85.333333 85.333333 0 0 0 60.928 40.533334l203.434667 29.525333-147.2 143.573333-4.821334 5.077334a85.333333 85.333333 0 0 0-19.712 70.442666l34.730667 202.624-201.813333-106.069333-4.778667-2.133333a42.666667 42.666667 0 0 0-34.986667 2.133333L290.304 855.466667l34.773333-202.624 0.896-6.912a85.333333 85.333333 0 0 0-25.429333-68.608l-147.242667-143.573334 203.52-29.525333a85.333333 85.333333 0 0 0 64.213334-46.677333L512 173.226667z" fill="#000000" p-id="5212"></path></svg>
                      {item.zan}
                    </div>
                    {/* 喜欢数 */}
                    <div style={{display:'flex',alignItems:'center',margin:'20px'}}>
                      <svg t="1739790777715"  className={styles.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13033" width="200" height="200"><path d="M523.733333 841.024l33.173334-32.576 99.690666-97.813333c70.976-69.632 120.32-117.973333 138.709334-135.893334 59.008-57.514667 93.248-121.28 99.626666-184.234666 6.250667-61.44-15.488-119.744-61.589333-164.672-44.992-43.84-98.88-61.909333-157.034667-52.906667-49.365333 7.616-101.034667 34.624-150.016 78.848a21.333333 21.333333 0 0 1-28.586666 0c-48.981333-44.224-100.650667-71.232-150.016-78.869333-58.154667-8.96-112.042667 9.088-157.034667 52.928-46.101333 44.928-67.84 103.210667-61.610667 164.693333 6.4 62.933333 40.64 126.72 99.648 184.213333a100207.573333 100207.573333 0 0 1 145.92 142.826667l24.256 23.765333L512 852.522667l11.733333-11.498667z m-11.733333 11.52l-1.493333 1.429333A2.133333 2.133333 0 0 1 512 853.333333c0.512 0 1.045333 0.213333 1.493333 0.64l-1.493333-1.450666z m157.781333-721.792c71.637333-11.093333 138.901333 11.477333 193.344 64.533333 55.317333 53.930667 81.834667 124.992 74.282667 199.530667-7.466667 73.642667-46.549333 146.368-112.32 210.474667-18.346667 17.898667-67.669333 66.218667-138.453333 135.637333-31.829333 31.232-65.706667 64.448-99.84 97.984L553.6 871.466667l-13.184 12.949333a40.554667 40.554667 0 0 1-56.832 0l-114.602667-112.64-24.213333-23.722667a677626.346667 677626.346667 0 0 0-145.856-142.762666C133.141333 541.184 94.08 468.48 86.613333 394.816c-7.552-74.538667 18.944-145.6 74.282667-199.530667 54.442667-53.056 121.706667-75.605333 193.344-64.533333 53.162667 8.213333 107.093333 34.688 157.781333 76.949333 50.709333-42.24 104.618667-68.736 157.781334-76.949333z" fill="#3D3D3D" p-id="13034"></path></svg>
                      {item.like}
                    </div>
                    {/* 评论数 */}
                    <div style={{display:'flex',alignItems:'center'}} onClick={()=>{setFlag(true),setpinglunId(item._id)}}>
                      <svg t="1739790811549" className={styles.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14125" width="200" height="200"><path d="M157.568 751.296c-11.008-18.688-18.218667-31.221333-21.802667-37.909333A424.885333 424.885333 0 0 1 85.333333 512C85.333333 276.362667 276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667-191.029333 426.666667-426.666667 426.666667a424.778667 424.778667 0 0 1-219.125333-60.501334 2786.56 2786.56 0 0 0-20.053334-11.765333l-104.405333 28.48c-23.893333 6.506667-45.802667-15.413333-39.285333-39.296l28.437333-104.288z m65.301333 3.786667l-17.258666 63.306666 63.306666-17.258666a32 32 0 0 1 24.522667 3.210666 4515.84 4515.84 0 0 1 32.352 18.944A360.789333 360.789333 0 0 0 512 874.666667c200.298667 0 362.666667-162.368 362.666667-362.666667S712.298667 149.333333 512 149.333333 149.333333 311.701333 149.333333 512c0 60.586667 14.848 118.954667 42.826667 171.136 3.712 6.912 12.928 22.826667 27.370667 47.232a32 32 0 0 1 3.338666 24.714667z m145.994667-70.773334a32 32 0 1 1 40.917333-49.205333A159.189333 159.189333 0 0 0 512 672c37.888 0 73.674667-13.173333 102.186667-36.885333a32 32 0 0 1 40.917333 49.216A223.178667 223.178667 0 0 1 512 736a223.178667 223.178667 0 0 1-143.136-51.690667z" fill="#000000" p-id="14126"></path></svg>
                      {item.pinglun}
                    </div>
                  </div>
                </div>
              </div>
            })
          }
          </>:<></>
        }
        {
          indexs===1?
          <>
            {
              list.filter(i=>i.status===false).map((item)=>{
                return <div key={item._id}  className={styles.big_box}>
                  <div className={styles.box}>
                    <div style={{display:'flex',alignItems:'center'}}>
                      <div className={styles.touxiang}>
                        <img src='/public/1.png' onClick={()=>navigate('/tiezhu?id='+item._id)} style={{width:'100%',height:'100%',borderRadius:'50%'}} alt="" />
                      </div>
                      <div>
                      </div>
                      <div style={{marginLeft:'10px'}}>
                        <p style={{marginBottom:'5px',fontSize:'18px',fontWeight:'bold'}}>{item.username}</p>
                        <span>{item.time}</span>
                      </div>
                    </div>
                    <Button round type='info' onClick={()=>changeStatus(item._id)} className={styles.btn_text} color='rgb(251,229,172)'>
                      +关注
                    </Button>
                  </div>
                  <div style={{marginTop:'10px'}} onClick={()=>navigate('/tiezi_xiang?id='+item._id)}>
                    <p style={{marginBottom:'10px',fontSize:'18px'}}>{item.content}</p>
                    <div style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
                      {
                        item.img.map(i=>{
                          return <img key={i} style={{width:'100px',height:'100px',marginRight:'10px',borderRadius:'10px'}} src={i} alt="" />
                        })
                      }
                    </div>
                  </div>
                  <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginTop:'10px'}}>
                    {/* 转发数 */}
                    <div style={{display:'flex',alignItems:'center'}}>
                      <svg t="1739790386357" className={styles.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4219" width="200" height="200"><path d="M865.922728 583.211878c-16.276708 0-29.580712 13.246699-29.667693 29.727045l0 215.125569c0 17.992793-14.58723 32.637328-32.520671 32.637328L181.762717 860.70182c-17.935488 0-32.520671-14.645558-32.520671-32.637328L149.242046 292.155966c0-17.992793 14.586207-32.637328 32.520671-32.637328l291.230897 0c16.304338-0.029676 29.580712-13.363356 29.580712-29.724998 0-16.392342-13.276375-29.727045-29.610388-29.727045l-295.336402 0c-48.358381 0-87.721901 39.450501-87.721901 87.925538l0 544.205493c0 48.475038 39.36352 87.925538 87.721901 87.925538l630.239961 0c48.358381 0 87.720877-39.450501 87.720877-87.925538L895.588375 612.762915C895.501394 596.458577 882.19739 583.211878 865.922728 583.211878z" fill="#231F20" p-id="4220"></path><path d="M930.818761 338.183256l0-0.318248L727.07645 133.511783l-6.435573-6.259564-0.814552 0.844228c-4.511757-2.532683-9.606799-3.873214-14.876826-3.873214-16.974603 0-30.774911 13.829983-30.774911 30.832216 0 5.298679 1.338485 10.393721 3.873214 14.907525l-0.903579 0.931209 141.845589 142.224212-145.573493 0.057305C436.396091 342.726735 378.197598 489.375723 361.049033 717.050096c0 17.004279 13.800307 30.832216 30.772864 30.832216 13.858636 0 25.620517-9.229199 29.464055-21.893636l1.397836-8.181333c18.022469-215.329207 60.470233-321.567833 251.839749-342.937536l144.466276 0L683.433464 510.804778l-5.502317 7.744381c-1.951445 4.104481-2.969635 9.112542-2.969635 13.654998 0 17.002232 13.799284 30.832216 30.772864 30.832216 4.832052 0 10.160407-1.164522 14.439874-3.37691L929.954067 350.740246c1.860371-1.305739 4.140297-4.52506 4.140297-6.970762C934.093341 341.323782 932.679132 339.488994 930.818761 338.183256z" fill="#231F20" p-id="4221"></path></svg>
                      {item.zhuanfa}
                    </div>
                    <div style={{display:'flex'}}>
                      {/* 收藏数 */}
                      <div style={{display:'flex',alignItems:'center'}}>
                        <svg t="1739790688231" className={styles.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5211" width="200" height="200"><path d="M454.613333 96.682667l-110.122666 223.146666-246.272 35.797334a64 64 0 0 0-35.456 109.141333l178.176 173.696-42.069334 245.290667a64 64 0 0 0 6.442667 40.576l3.114667 5.333333a64 64 0 0 0 83.328 21.546667L512 835.413333l220.245333 115.797334a64 64 0 0 0 92.885334-67.456l-42.069334-245.290667 178.176-173.653333a64 64 0 0 0-35.456-109.226667l-246.272-35.754667-110.08-223.146666a64 64 0 0 0-114.816 0zM512 173.226667l91.008 184.362666 3.328 6.144a85.333333 85.333333 0 0 0 60.928 40.533334l203.434667 29.525333-147.2 143.573333-4.821334 5.077334a85.333333 85.333333 0 0 0-19.712 70.442666l34.730667 202.624-201.813333-106.069333-4.778667-2.133333a42.666667 42.666667 0 0 0-34.986667 2.133333L290.304 855.466667l34.773333-202.624 0.896-6.912a85.333333 85.333333 0 0 0-25.429333-68.608l-147.242667-143.573334 203.52-29.525333a85.333333 85.333333 0 0 0 64.213334-46.677333L512 173.226667z" fill="#000000" p-id="5212"></path></svg>
                        {item.zan}
                      </div>
                      {/* 喜欢数 */}
                      <div style={{display:'flex',alignItems:'center',margin:'20px'}}>
                        <svg t="1739790777715"  className={styles.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13033" width="200" height="200"><path d="M523.733333 841.024l33.173334-32.576 99.690666-97.813333c70.976-69.632 120.32-117.973333 138.709334-135.893334 59.008-57.514667 93.248-121.28 99.626666-184.234666 6.250667-61.44-15.488-119.744-61.589333-164.672-44.992-43.84-98.88-61.909333-157.034667-52.906667-49.365333 7.616-101.034667 34.624-150.016 78.848a21.333333 21.333333 0 0 1-28.586666 0c-48.981333-44.224-100.650667-71.232-150.016-78.869333-58.154667-8.96-112.042667 9.088-157.034667 52.928-46.101333 44.928-67.84 103.210667-61.610667 164.693333 6.4 62.933333 40.64 126.72 99.648 184.213333a100207.573333 100207.573333 0 0 1 145.92 142.826667l24.256 23.765333L512 852.522667l11.733333-11.498667z m-11.733333 11.52l-1.493333 1.429333A2.133333 2.133333 0 0 1 512 853.333333c0.512 0 1.045333 0.213333 1.493333 0.64l-1.493333-1.450666z m157.781333-721.792c71.637333-11.093333 138.901333 11.477333 193.344 64.533333 55.317333 53.930667 81.834667 124.992 74.282667 199.530667-7.466667 73.642667-46.549333 146.368-112.32 210.474667-18.346667 17.898667-67.669333 66.218667-138.453333 135.637333-31.829333 31.232-65.706667 64.448-99.84 97.984L553.6 871.466667l-13.184 12.949333a40.554667 40.554667 0 0 1-56.832 0l-114.602667-112.64-24.213333-23.722667a677626.346667 677626.346667 0 0 0-145.856-142.762666C133.141333 541.184 94.08 468.48 86.613333 394.816c-7.552-74.538667 18.944-145.6 74.282667-199.530667 54.442667-53.056 121.706667-75.605333 193.344-64.533333 53.162667 8.213333 107.093333 34.688 157.781333 76.949333 50.709333-42.24 104.618667-68.736 157.781334-76.949333z" fill="#3D3D3D" p-id="13034"></path></svg>
                        {item.like}
                      </div>
                      {/* 评论数 */}
                      <div style={{display:'flex',alignItems:'center'}} onClick={()=>{setFlag(true),setpinglunId(item._id)}}>
                        <svg t="1739790811549" className={styles.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14125" width="200" height="200"><path d="M157.568 751.296c-11.008-18.688-18.218667-31.221333-21.802667-37.909333A424.885333 424.885333 0 0 1 85.333333 512C85.333333 276.362667 276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667-191.029333 426.666667-426.666667 426.666667a424.778667 424.778667 0 0 1-219.125333-60.501334 2786.56 2786.56 0 0 0-20.053334-11.765333l-104.405333 28.48c-23.893333 6.506667-45.802667-15.413333-39.285333-39.296l28.437333-104.288z m65.301333 3.786667l-17.258666 63.306666 63.306666-17.258666a32 32 0 0 1 24.522667 3.210666 4515.84 4515.84 0 0 1 32.352 18.944A360.789333 360.789333 0 0 0 512 874.666667c200.298667 0 362.666667-162.368 362.666667-362.666667S712.298667 149.333333 512 149.333333 149.333333 311.701333 149.333333 512c0 60.586667 14.848 118.954667 42.826667 171.136 3.712 6.912 12.928 22.826667 27.370667 47.232a32 32 0 0 1 3.338666 24.714667z m145.994667-70.773334a32 32 0 1 1 40.917333-49.205333A159.189333 159.189333 0 0 0 512 672c37.888 0 73.674667-13.173333 102.186667-36.885333a32 32 0 0 1 40.917333 49.216A223.178667 223.178667 0 0 1 512 736a223.178667 223.178667 0 0 1-143.136-51.690667z" fill="#000000" p-id="14126"></path></svg>
                        {item.pinglun}
                      </div>
                    </div>
                  </div>
                </div>
              })
            }
          </>
          :
          <></>
        }
        {
          indexs===2?
          <>
            <div className={styles.big_box}>
              <div>
                <Cell title='热门话题' isLink value='展示更多' onClick={()=>navigate('/huati')} />
              </div>
              {
                huati.map((item,index)=>{
                  return <div key={item._id}>
                    <div style={{display:'flex',alignItems:'center',marginBottom:'20px',marginLeft:'20px'}}>
                       <span className={styles.touxiang2}>{index+1}</span>
                       <p style={{marginLeft:'20px',marginRight:'20px'}}>#{item.name}</p>
                       <svg t="1739794522570" className="icon" style={{width:'40px',height:'40px'}} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16978" width="200" height="200"><path d="M693.8 233.8c19.2 42.2 23 113.6-16 148.2-65.8-250-229-301.2-229-301.2 19.2 129-70 270-156 375.4-3-51.4-6.2-87-33.2-136.2-6 93.4-77.4 169.6-96.8 263.2-26.2 126.8 19.6 219.6 193.6 317.6h25c-37.8-78.6 5.2-135.6 34.4-178 23.8-34.6 34.2-69 38.2-84.4-0.4 2.8 3.6-21.6 3-18.6 2.8-3 3.6 10.8 5 17.6 2 19.8 14.6 40.6 8.8 76 44.2-49.2 52.6-127.6 45.8-157.6 100 69.8 158.4 232.8 100.8 344.8h24.2c442.6-250 110.2-624.6 52.2-666.8z" fill="#FC5300" p-id="16979"></path></svg>
                    </div>
                  </div>
                })
              }
            </div>
            <div className={styles.big_box}>
              <Cell title='热门微博' />
                {
                list.sort((a,b)=>{
                  return b.like-a.like
                })
                .map((item)=>{
                  return <div key={item._id}  className={styles.big_box}>
                    <div className={styles.box}>
                      <div style={{display:'flex',alignItems:'center'}}>
                        <div className={styles.touxiang} onClick={()=>navigate('/tiezhu?id='+item._id)}>
                          <img src='/public/1.png' onClick={()=>navigate('/tiezhu')} style={{width:'100%',height:'100%',borderRadius:'50%'}} alt="" />
                        </div>
                        <div>
                        </div>
                        <div style={{marginLeft:'10px'}}>
                          <p style={{marginBottom:'5px',fontSize:'18px',fontWeight:'bold'}}>{item.username}</p>
                          <span>{item.time}</span>
                        </div>
                      </div>
                      {
                        item.status===true?
                        <Button round type='info' onClick={()=>changeStatus(item._id)} className={styles.btn_text} color='rgb(251,229,172)'>
                          已关注
                        </Button>
                        :
                        <Button round type='info' onClick={()=>changeStatus(item._id)} className={styles.btn_text} color='rgb(251,229,172)'>
                          +关注
                        </Button>
                      }
                     
                    </div>
                    <div style={{marginTop:'10px'}}>
                      <p style={{marginBottom:'10px',fontSize:'18px'}}>{item.content}</p>
                      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
                        {
                          item.img.map(i=>{
                            return <img key={i} style={{width:'100px',height:'100px',marginRight:'10px',borderRadius:'10px'}} src={i} alt="" />
                          })
                        }
                      </div>
                    </div>
                    <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginTop:'10px'}}>
                      {/* 转发数 */}
                      <div style={{display:'flex',alignItems:'center'}}>
                        <svg t="1739790386357" className={styles.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4219" width="200" height="200"><path d="M865.922728 583.211878c-16.276708 0-29.580712 13.246699-29.667693 29.727045l0 215.125569c0 17.992793-14.58723 32.637328-32.520671 32.637328L181.762717 860.70182c-17.935488 0-32.520671-14.645558-32.520671-32.637328L149.242046 292.155966c0-17.992793 14.586207-32.637328 32.520671-32.637328l291.230897 0c16.304338-0.029676 29.580712-13.363356 29.580712-29.724998 0-16.392342-13.276375-29.727045-29.610388-29.727045l-295.336402 0c-48.358381 0-87.721901 39.450501-87.721901 87.925538l0 544.205493c0 48.475038 39.36352 87.925538 87.721901 87.925538l630.239961 0c48.358381 0 87.720877-39.450501 87.720877-87.925538L895.588375 612.762915C895.501394 596.458577 882.19739 583.211878 865.922728 583.211878z" fill="#231F20" p-id="4220"></path><path d="M930.818761 338.183256l0-0.318248L727.07645 133.511783l-6.435573-6.259564-0.814552 0.844228c-4.511757-2.532683-9.606799-3.873214-14.876826-3.873214-16.974603 0-30.774911 13.829983-30.774911 30.832216 0 5.298679 1.338485 10.393721 3.873214 14.907525l-0.903579 0.931209 141.845589 142.224212-145.573493 0.057305C436.396091 342.726735 378.197598 489.375723 361.049033 717.050096c0 17.004279 13.800307 30.832216 30.772864 30.832216 13.858636 0 25.620517-9.229199 29.464055-21.893636l1.397836-8.181333c18.022469-215.329207 60.470233-321.567833 251.839749-342.937536l144.466276 0L683.433464 510.804778l-5.502317 7.744381c-1.951445 4.104481-2.969635 9.112542-2.969635 13.654998 0 17.002232 13.799284 30.832216 30.772864 30.832216 4.832052 0 10.160407-1.164522 14.439874-3.37691L929.954067 350.740246c1.860371-1.305739 4.140297-4.52506 4.140297-6.970762C934.093341 341.323782 932.679132 339.488994 930.818761 338.183256z" fill="#231F20" p-id="4221"></path></svg>
                        {item.zhuanfa}
                      </div>
                      <div style={{display:'flex'}}>
                        {/* 收藏数 */}
                        <div style={{display:'flex',alignItems:'center'}}>
                          <svg t="1739790688231" className={styles.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5211" width="200" height="200"><path d="M454.613333 96.682667l-110.122666 223.146666-246.272 35.797334a64 64 0 0 0-35.456 109.141333l178.176 173.696-42.069334 245.290667a64 64 0 0 0 6.442667 40.576l3.114667 5.333333a64 64 0 0 0 83.328 21.546667L512 835.413333l220.245333 115.797334a64 64 0 0 0 92.885334-67.456l-42.069334-245.290667 178.176-173.653333a64 64 0 0 0-35.456-109.226667l-246.272-35.754667-110.08-223.146666a64 64 0 0 0-114.816 0zM512 173.226667l91.008 184.362666 3.328 6.144a85.333333 85.333333 0 0 0 60.928 40.533334l203.434667 29.525333-147.2 143.573333-4.821334 5.077334a85.333333 85.333333 0 0 0-19.712 70.442666l34.730667 202.624-201.813333-106.069333-4.778667-2.133333a42.666667 42.666667 0 0 0-34.986667 2.133333L290.304 855.466667l34.773333-202.624 0.896-6.912a85.333333 85.333333 0 0 0-25.429333-68.608l-147.242667-143.573334 203.52-29.525333a85.333333 85.333333 0 0 0 64.213334-46.677333L512 173.226667z" fill="#000000" p-id="5212"></path></svg>
                          {item.zan}
                        </div>
                        {/* 喜欢数 */}
                        <div style={{display:'flex',alignItems:'center',margin:'20px'}}>
                          <svg t="1739790777715"  className={styles.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13033" width="200" height="200"><path d="M523.733333 841.024l33.173334-32.576 99.690666-97.813333c70.976-69.632 120.32-117.973333 138.709334-135.893334 59.008-57.514667 93.248-121.28 99.626666-184.234666 6.250667-61.44-15.488-119.744-61.589333-164.672-44.992-43.84-98.88-61.909333-157.034667-52.906667-49.365333 7.616-101.034667 34.624-150.016 78.848a21.333333 21.333333 0 0 1-28.586666 0c-48.981333-44.224-100.650667-71.232-150.016-78.869333-58.154667-8.96-112.042667 9.088-157.034667 52.928-46.101333 44.928-67.84 103.210667-61.610667 164.693333 6.4 62.933333 40.64 126.72 99.648 184.213333a100207.573333 100207.573333 0 0 1 145.92 142.826667l24.256 23.765333L512 852.522667l11.733333-11.498667z m-11.733333 11.52l-1.493333 1.429333A2.133333 2.133333 0 0 1 512 853.333333c0.512 0 1.045333 0.213333 1.493333 0.64l-1.493333-1.450666z m157.781333-721.792c71.637333-11.093333 138.901333 11.477333 193.344 64.533333 55.317333 53.930667 81.834667 124.992 74.282667 199.530667-7.466667 73.642667-46.549333 146.368-112.32 210.474667-18.346667 17.898667-67.669333 66.218667-138.453333 135.637333-31.829333 31.232-65.706667 64.448-99.84 97.984L553.6 871.466667l-13.184 12.949333a40.554667 40.554667 0 0 1-56.832 0l-114.602667-112.64-24.213333-23.722667a677626.346667 677626.346667 0 0 0-145.856-142.762666C133.141333 541.184 94.08 468.48 86.613333 394.816c-7.552-74.538667 18.944-145.6 74.282667-199.530667 54.442667-53.056 121.706667-75.605333 193.344-64.533333 53.162667 8.213333 107.093333 34.688 157.781333 76.949333 50.709333-42.24 104.618667-68.736 157.781334-76.949333z" fill="#3D3D3D" p-id="13034"></path></svg>
                          {item.like}
                        </div>
                        {/* 评论数 */}
                        <div style={{display:'flex',alignItems:'center'}} onClick={()=>{setFlag(true),setpinglunId(item._id)}}>
                          <svg t="1739790811549" className={styles.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14125" width="200" height="200"><path d="M157.568 751.296c-11.008-18.688-18.218667-31.221333-21.802667-37.909333A424.885333 424.885333 0 0 1 85.333333 512C85.333333 276.362667 276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667-191.029333 426.666667-426.666667 426.666667a424.778667 424.778667 0 0 1-219.125333-60.501334 2786.56 2786.56 0 0 0-20.053334-11.765333l-104.405333 28.48c-23.893333 6.506667-45.802667-15.413333-39.285333-39.296l28.437333-104.288z m65.301333 3.786667l-17.258666 63.306666 63.306666-17.258666a32 32 0 0 1 24.522667 3.210666 4515.84 4515.84 0 0 1 32.352 18.944A360.789333 360.789333 0 0 0 512 874.666667c200.298667 0 362.666667-162.368 362.666667-362.666667S712.298667 149.333333 512 149.333333 149.333333 311.701333 149.333333 512c0 60.586667 14.848 118.954667 42.826667 171.136 3.712 6.912 12.928 22.826667 27.370667 47.232a32 32 0 0 1 3.338666 24.714667z m145.994667-70.773334a32 32 0 1 1 40.917333-49.205333A159.189333 159.189333 0 0 0 512 672c37.888 0 73.674667-13.173333 102.186667-36.885333a32 32 0 0 1 40.917333 49.216A223.178667 223.178667 0 0 1 512 736a223.178667 223.178667 0 0 1-143.136-51.690667z" fill="#000000" p-id="14126"></path></svg>
                          {item.pinglun}
                        </div>
                      </div>
                    </div>
                  </div>
                })
              }
            </div>
          </>
          :<></>
        }

        <Popup
          visible={flag}
          closeable
          style={{ height: '50%' }}
          position='bottom'
          onClose={() => {setFlag(false),setShow(false)}}
        >
            <div style={{height:'90%'}}>
               {
                 pinglun.filter(i=>i.tieziId==pinglunId).map(item=>{
                  return <div key={item._id} className={styles.bbig_box}>
                      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
                          <div style={{display:'flex',alignItems:'center'}}>
                            <div className={styles.bbox}>
                                <img src='/public/1.png' style={{width:'100%',height:'100%',borderRadius:'50%'}} alt="" />
                            </div>
                            <div style={{fontSize:'16px'}}>
                                {item.name}
                            </div>
                          </div>
                          <svg t="1739790777715"  className={styles.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13033" width="200" height="200"><path d="M523.733333 841.024l33.173334-32.576 99.690666-97.813333c70.976-69.632 120.32-117.973333 138.709334-135.893334 59.008-57.514667 93.248-121.28 99.626666-184.234666 6.250667-61.44-15.488-119.744-61.589333-164.672-44.992-43.84-98.88-61.909333-157.034667-52.906667-49.365333 7.616-101.034667 34.624-150.016 78.848a21.333333 21.333333 0 0 1-28.586666 0c-48.981333-44.224-100.650667-71.232-150.016-78.869333-58.154667-8.96-112.042667 9.088-157.034667 52.928-46.101333 44.928-67.84 103.210667-61.610667 164.693333 6.4 62.933333 40.64 126.72 99.648 184.213333a100207.573333 100207.573333 0 0 1 145.92 142.826667l24.256 23.765333L512 852.522667l11.733333-11.498667z m-11.733333 11.52l-1.493333 1.429333A2.133333 2.133333 0 0 1 512 853.333333c0.512 0 1.045333 0.213333 1.493333 0.64l-1.493333-1.450666z m157.781333-721.792c71.637333-11.093333 138.901333 11.477333 193.344 64.533333 55.317333 53.930667 81.834667 124.992 74.282667 199.530667-7.466667 73.642667-46.549333 146.368-112.32 210.474667-18.346667 17.898667-67.669333 66.218667-138.453333 135.637333-31.829333 31.232-65.706667 64.448-99.84 97.984L553.6 871.466667l-13.184 12.949333a40.554667 40.554667 0 0 1-56.832 0l-114.602667-112.64-24.213333-23.722667a677626.346667 677626.346667 0 0 0-145.856-142.762666C133.141333 541.184 94.08 468.48 86.613333 394.816c-7.552-74.538667 18.944-145.6 74.282667-199.530667 54.442667-53.056 121.706667-75.605333 193.344-64.533333 53.162667 8.213333 107.093333 34.688 157.781333 76.949333 50.709333-42.24 104.618667-68.736 157.781334-76.949333z" fill="#3D3D3D" p-id="13034"></path></svg> 
                      </div>
                      <div className={styles.bbox2}>
                          <p style={{fontSize:'18px',margin:'10px 0'}}>{item.content}</p>
                          {item.img?<img src={item.img} style={{width:'100px',height:'100px',borderRadius:'10px'}} alt="" />:<></>}
                          
                          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginTop:'10px'}}>
                             <p>{moment(item.time).format('YYYY-MM-DD HH:mm:ss')}</p>
                             <button className={styles.bb_btn} onClick={()=>{setShow(!show),setpinglunId2(item._id)}}>回复</button>
                          </div>
                      </div>
                      <Collapse initExpanded="1" accordion>
                            {
                               item.children?
                               <>
                                  <Collapse.Item  title={<div>展开回复</div>} name="2">
                                        {
                                          item.children.map(item2=>{
                                            return <div key={item2._id}>
                                                  <div style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
                                                    <div style={{display:'flex',alignItems:'center'}}>
                                                      <div className={styles.bbox}>
                                                          <img src='/public/1.png' style={{width:'100%',height:'100%',borderRadius:'50%'}} alt="" />
                                                      </div>
                                                      <div style={{fontSize:'16px'}}>
                                                          {item2.name}
                                                      </div>
                                                    </div>
                                                    <svg t="1739790777715"  className={styles.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13033" width="200" height="200"><path d="M523.733333 841.024l33.173334-32.576 99.690666-97.813333c70.976-69.632 120.32-117.973333 138.709334-135.893334 59.008-57.514667 93.248-121.28 99.626666-184.234666 6.250667-61.44-15.488-119.744-61.589333-164.672-44.992-43.84-98.88-61.909333-157.034667-52.906667-49.365333 7.616-101.034667 34.624-150.016 78.848a21.333333 21.333333 0 0 1-28.586666 0c-48.981333-44.224-100.650667-71.232-150.016-78.869333-58.154667-8.96-112.042667 9.088-157.034667 52.928-46.101333 44.928-67.84 103.210667-61.610667 164.693333 6.4 62.933333 40.64 126.72 99.648 184.213333a100207.573333 100207.573333 0 0 1 145.92 142.826667l24.256 23.765333L512 852.522667l11.733333-11.498667z m-11.733333 11.52l-1.493333 1.429333A2.133333 2.133333 0 0 1 512 853.333333c0.512 0 1.045333 0.213333 1.493333 0.64l-1.493333-1.450666z m157.781333-721.792c71.637333-11.093333 138.901333 11.477333 193.344 64.533333 55.317333 53.930667 81.834667 124.992 74.282667 199.530667-7.466667 73.642667-46.549333 146.368-112.32 210.474667-18.346667 17.898667-67.669333 66.218667-138.453333 135.637333-31.829333 31.232-65.706667 64.448-99.84 97.984L553.6 871.466667l-13.184 12.949333a40.554667 40.554667 0 0 1-56.832 0l-114.602667-112.64-24.213333-23.722667a677626.346667 677626.346667 0 0 0-145.856-142.762666C133.141333 541.184 94.08 468.48 86.613333 394.816c-7.552-74.538667 18.944-145.6 74.282667-199.530667 54.442667-53.056 121.706667-75.605333 193.344-64.533333 53.162667 8.213333 107.093333 34.688 157.781333 76.949333 50.709333-42.24 104.618667-68.736 157.781334-76.949333z" fill="#3D3D3D" p-id="13034"></path></svg> 
                                                </div>
                                                <div className={styles.bbox2}>
                                                    <p style={{fontSize:'18px'}}>{item2.content}</p>
                                                    {item2.img?
                                                     <img src={item2.img} style={{width:'100px',height:'100px',borderRadius:'10px'}} alt="" />
                                                    :<></>}
                                                   
                                                    <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginTop:'10px'}}>
                                                    <p>{moment(item.time).format('YYYY-MM-DD HH:mm:ss')}</p>
                                                      <button className={styles.bb_btn} onClick={()=>{setShow(!show)}}>回复</button>
                                                    </div>
                                                </div>
                                            </div>
                                          })
                                        }
                                  </Collapse.Item>
                               </>:
                               <></>
                             }
                        
                      </Collapse>
                  </div>
                 })
               }
            </div>
            <div className={styles.bottom} onClick={()=> setShow(!show)}>
                说点什么吧
            </div>

            {
              show?
              <div className={styles.box3}>
                  <div className={styles.bot_inp}>
                      <input
                          type="text"
                          className={styles.bot_inp_inp}
                          placeholder='请输入内容'
                          value={inputValue}
                          onChange={handleInputChange}
                      />
                      <button className={styles.bot_inp_btn} onClick={() => {
                        if (pinglunId2) {
                          addpinglun2();
                        } else {
                          addpinglun();
                        }
                        setShow(false);
                      }}>
                          发送
                      </button>
                  </div>
                      {/* 表情包展示区域 */}
                      <div className={styles.emoji_container}>
                          {emojis.map((emoji, index) => (
                              <span
                                  key={index}
                                  className={styles.emoji}
                                  onClick={() => handleEmojiClick(emoji)}
                              >
                                  {emoji}
                              </span>
                          ))}
                      </div>
              </div>
              
              :<></>
            }
        </Popup>
      </div>
        

    </>
  )
}
